<script setup lang="ts">

import {onMounted, ref} from "vue";
import {
  GetTextContent,
  GetTextList
} from "../../../../wailsjs/go/view/SecretText";
import {base} from "../../../../wailsjs/go/models.ts";
import {Back} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";


const router = useRouter()
const textDetail = ref<base.SecretTextContent>()

onMounted(()=>{
  const tid=sessionStorage.getItem("secretTextId")
  const adminKey=sessionStorage.getItem("secretAdminKey")
  if (adminKey && tid){
    GetTextContent(tid,adminKey).then(res =>{
      textDetail.value = res
    })
  }
})
const clickBackBtn = ()=>{
  router.push('/secret')
}



</script>

<template>
  <div>
    <el-row>
      <div class="justify-end">
        <el-tooltip content="返回列表" placement="top">
          <el-button @click="clickBackBtn" :icon="Back" circle />
        </el-tooltip>
      </div>
    </el-row>
    <el-row>
      <el-col :span="20">
        <div  v-for="(item, index) in textDetail?.chapterList" :key="index">
          <h2 id="{{item.chapterId}} ">{{item.title}}</h2>
          <el-text>
            <pre>
              {{item.content}}
            </pre>
            </el-text>
        </div>
      </el-col>
      <el-col :span="4">
        <el-anchor :offset="70" >
          <el-anchor-link
            :href=" `#${item.chapterId}` "
            v-for="(item, index) in textDetail?.chapterList" :key="index">
            {{item.title}}
          </el-anchor-link>
        </el-anchor>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">

</style>
